<div class="mx-auto max-w-6xl">
  <div class="mt-4 flex flex-wrap items-end justify-between gap-4">
    <div class="flex flex-wrap items-center gap-6">
      <div class="w-32 shrink-0">
        <img
          class="rounded-lg shadow"
          src={
            ~p"/api/images?url=#{@item.image}&type=proxy&token=#{@current_user.api_token.token}"
          }
          alt=""
        />
      </div>
      <div>
        <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
          <h1 class="text-2xl/8 font-semibold text-zinc-950 sm:text-xl/8 dark:text-white">
            <%= @item.name %>
          </h1>
        </div>
        <div class="mt-2 text-sm/6 text-zinc-500">
          Year <span aria-hidden="true">·</span>
          Studio <span aria-hidden="true">·</span>
          100 minutes
        </div>
      </div>
    </div>
  </div>

  <div class="mt-12">
    <h2 class="text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white">Summary</h2>
    <hr role="presentation" class="mt-4 w-full border-t border-zinc-950/10 dark:border-white/10" />
    <dl class="grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,theme(spacing.80))_auto] sm:text-sm/6">
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Scores
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        <div class="flex gap-x-6">
          <span class="MovieDetails-rating-gwOHo">
            <span class="flex gap-x-1">
              <img
                class="TmdbRating-image-TmxGo"
                src=""
                style="height: 20px;"
              />79%
            </span>
          </span>
          <span class="MovieDetails-rating-gwOHo">
            <span class="flex gap-x-1">
              <img
                class="ImdbRating-image-EBG7Y"
                src=""
                style="height: 20px;"
              />8.1
            </span>
          </span>
          <span class="MovieDetails-rating-gwOHo">
            <span class="flex gap-x-1">
              <img
                class="RottenTomatoRating-image-HoF9G"
                src=""
                style="height: 20px;"
              />95%
            </span>
          </span>
        </div>
      </dd>
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Studio
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        Studio
      </dd>
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Rating
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        Rating
      </dd>
      <dt class="col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5">
        Overview
      </dt>
      <dd class="pb-3 pt-1 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 dark:text-white dark:sm:border-white/5 sm:[&:nth-child(2)]:border-none">
        <%= if assigns[:person] do %>
          <%= for paragraph <- @person["biography"] |> String.split("\n\n") do %>
            <p><%= paragraph %></p>
            <br />
          <% end %>
        <% end %>
      </dd>
    </dl>
  </div>
</div>
